<template>
  <div class="parent-component">
    <h1>父组件：事件监听</h1>
    
    <!-- 子组件 -->
    <ChildComponent 
      @count-change="handleCountChange"
      @reset-count="handleResetCount"
      @send-message="handleMessage"
    />

    <!-- 事件结果展示 -->
    <div class="event-results">
      <h2>事件接收结果</h2>
      
      <div class="event-item">
        <strong>当前计数：</strong> {{ currentCount }}
      </div>
      
      <div class="event-item">
        <strong>计数历史：</strong>
        <ul>
          <li v-for="(count, index) in countHistory" :key="index">
            {{ count }}
          </li>
        </ul>
      </div>
      
      <div class="event-item">
        <strong>接收消息：</strong> 
        <p>{{ receivedMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

// 事件状态
const currentCount = ref(0)
const countHistory = ref([])
const receivedMessage = ref('暂无消息')

// 处理计数变化事件
const handleCountChange = (newCount) => {
  currentCount.value = newCount
  countHistory.value.push(newCount)
}

// 处理重置计数事件
const handleResetCount = () => {
  currentCount.value = 0
  countHistory.value = []
}

// 处理消息事件
const handleMessage = (message) => {
  receivedMessage.value = message || '空消息'
}
</script>

<style scoped>
.parent-component {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.event-results {
  margin-top: 20px;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
}

.event-item {
  background-color: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
  background-color: #e0e0e0;
  padding: 5px;
  border-radius: 3px;
}
</style>
